<template>
	<coreshop-page title="发票申请" mode="left">
		<view class="layout-set-box">
			<view class="item-box m-b-50">
				<view class="lab">发票类型</view>
				<view class="val">
					<uv-radio-group v-model="state.model.typeName" @change="handleChangeRadio">
						<uv-radio :customStyle="{ 'margin-right': '30rpx' }" v-for="(item, index) in state.radioItems"
							:key="index" :label="item.name" :name="item.name">
						</uv-radio>
					</uv-radio-group>
				</view>
			</view>
			<view class="item-box">
				<view class="lab">发票抬头</view>
				<view class="val">
					<uv-input placeholder="请输入发票抬头" border="surround" v-model="state.model.name"
						@input="handleInput"></uv-input>
				</view>
			</view>
			<view class="invoice-list" v-show="state.showInvoiceList">
				<view class="list-box" v-for="item in state.invoiceList" :key="item.id" @click="handleUseInvoice(item)">
					<view class="msg-box">
						<view class="name">{{ item.name || '' }}</view>
						<view class="code">{{ item.code || '' }}</view>
					</view>
					<view class="peo">
						{{ item.frequency || '' }}人使用过
					</view>
				</view>
			</view>
			<view class="item-box m-t-50 m-b-50" v-show="state.model.type == InvoiceEnum.company">
				<view class="lab">纳税人识别号</view>
				<view class="val">
					<uv-input placeholder="请输入纳税人识别号" border="surround" v-model="state.model.code"></uv-input>
				</view>
			</view>
			<view class="item-box" v-show="state.model.type == InvoiceEnum.company">
				<view class="lab">发票内容</view>
				<view class="val">
					明细
				</view>
			</view>
			<view class="item-box m-t-50 tip-box">
				<view class="lab">注：</view>
				<view class="val">
					<view class="tip">个人发票只需录入抬头名称为个人姓名即可，企业发票需要提交公司名称和纳税人识别号。</view>
					<view class="tip">发票一旦开具，不可修改，请认真填写。</view>
					<view class="tip">发票将在订单完成后7个工作日开具。</view>
					<view class="tip">电子发票可在订单详情中下载，纸质发票将在订单完成后7个工作日内寄出。</view>
				</view>
			</view>

			<!-- 底部按钮 -->
			<view class="layout-btn">
				<view class="btn-box">
					<view class="ok" @click="handleSubmitInvoice"> 提交申请 </view>
				</view>
			</view>
		</view>
	</coreshop-page>
</template>
<script setup lang="ts">
	import { reactive } from 'vue';
	import { onLoad } from '@dcloudio/uni-app';
	import { queryTaxInfo, queryCheckInvoice, querySubmitInvoiceApply } from '@/core/api';
	import type { Response } from '@/core/models';
	import { InvoiceEnum } from '@/core/enum';
	import { handleShowToast } from '@/core/utils';

	interface QueryParams {
		orderId ?: string;
	}

	const state = reactive<{
		radioItems : Array<{
			name : string,
			value : number,
		}>;
		model : {
			typeName : string,
			name : string,
			code : string,
			type : InvoiceEnum,
		}
		invoiceList : Array<any>;
		showInvoiceList : boolean;
		orderId : string;
	}>({
		radioItems: [{
			name: '个人发票',
			value: InvoiceEnum.personal
		},
		{
			name: '企业发票',
			value: InvoiceEnum.company
		}],
		model: {
			typeName: '', // 发票类型 2个人 3企业
			name: '', // 抬头名称
			code: '', // 税号
			type: InvoiceEnum.no,
		},
		invoiceList: [],
		showInvoiceList: false,
		orderId: "",
	});


	onLoad((query : QueryParams) => {
		if (query?.orderId) {
			state.orderId = query?.orderId;
		} else {
			handleShowToast('获取失败', 'error', () => {
				setTimeout(() => {
					uni.navigateBack();
				}, 1500)
			})
		}
	});

	/** 切换radio */
	const handleChangeRadio = (e : any) => {
		state.model.type = (state.radioItems.find((item : any) => item.name == e)).value;
	}

	/** 发票抬头输入 */
	const handleInput = (e : any) => {
		if (e) {
			state.model.name = e;
			getTaxInfo();
		}
	}

	/** 发票模糊查询 */
	const getTaxInfo = async () => {
		const taxInfo : Response<any> = await queryTaxInfo({ name: state.model.name });
		if (taxInfo.status) {
			state.invoiceList = taxInfo.data;
			state.showInvoiceList = true;
		}
	}

	/** 使用发票 */
	const handleUseInvoice = (item : any) => {
		state.model.name = item.name;
		state.model.code = item.code;
		state.model.type = InvoiceEnum.company;
		state.model.typeName = state.radioItems[1].name;
		state.showInvoiceList = false;
	}

	/** 保存发票 */
	const handleSubmitInvoice = async () => {
		if (state.model.type === InvoiceEnum.no) {
			handleShowToast('请选择发票类型')
			return false;
		}
		if (!state.model.name) {
			handleShowToast('请输入发票抬头')
			return false;
		}
		if (state.model.type === InvoiceEnum.company && !state.model.code) {
			handleShowToast('请输入发票税号信息')
			return false;
		}
		const invoiceApply : Response<any> = await querySubmitInvoiceApply({
			type: state.model.type,
			name: state.model.name,
			code: state.model.type == InvoiceEnum.company ? state.model.type : '',
			orderId: state.orderId,
		});
		if (invoiceApply.status && invoiceApply.data) {
			handleShowToast('申请提交成功', 'success', () => {
				setTimeout(() => {
					uni.navigateBack();
				}, 1500)
			})
		} else {
			handleShowToast(invoiceApply.msg)
		}
	}
</script>
<style lang="scss" scoped>
	@import './invoice.scss';
</style>